<template>
	<div class="container">
		<nav class="navbar navbar-expand-lg navbar-light">
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
			aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarNav">
				<ul class="navbar-nav nav-relative">
					<span style="color: #87939D;">sortby:</span>
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
						aria-expanded="false">
							Relevance
						</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<!-- <a class="dropdown-item" href="#"></a> -->
							<p class="dropdown-item">你的request已经接受</p>
						</div>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Category</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Service</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Expertise</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Price</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Stats</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Business</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Language</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Location</a>
					</li>
				</ul>
				<div class="ml-auto btn-links">
					<!-- <button type="button" class="btn btn-primary">0</button>
					<span>Selected creators</span>
					<img src="../../public/beibao.png" alt=""> -->

					<!-- Button trigger modal -->
					<div class="btn-cont">
						<span>1</span>
						<button type="button" class="btn btn-primary btn-lg btn-prm" data-toggle="modal" data-target="#myModal">
							<img src="../assets/images/btn.png" alt="">
						</button>
					</div>
					
					<!-- Modal -->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h4 class="modal-title" id="myModalLabel">Post Public Brief/Job</h4>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								</div>
								<div class="text">
									<p style="padding:10px 0 0 15px;">Tell the creator what you want them to do & include references.</p>
								</div>
								<div class="modal-body">
									<form accept-charset="UTF-8">
										<div class="form-group">
											<label for="industy">行业</label>
											<select name="industy" class="form-control" id="industy">
												<option>B2B</option>
											</select>
										</div>
										<!--  -->
										<div class="from-item-brand d-flex justify-content-between">
											<div class="form-group">
												<label for="brand">品牌名称</label>
												<input type="text" class="form-control" id="brand" placeholder="Huawei">
											</div>
											<div class="form-group">
												<label for="product">产品</label>
												<input type="text" class="form-control" id="product" placeholder="mate30pro.xxx.com">
											</div>
										</div>
										<!-- 期望假期 -->
										<div class="d-flex justify-content-between from-item-hope">
											<div class="form-group">
												<label for="hope-data">期望交期</label>
												<select name="industy" class="form-control" id="hope-data">
													<option>付款后10天</option>
												</select>
											</div>
											<div class="form-group">
												<label for="tv-show">推广目标</label>
												<select name="industy" class="form-control" id="tv-show">
													<option>直播带货</option>
												</select>
											</div>
										</div>
										<!-- 期望交期 end -->
										<!-- 发布平台 -->
										<p>发布平台</p>
										<div class="platform d-flex">
											<div>
												<div class="form-group">
													<div class="form-check form-check-inline">
														<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
														<label class="form-check-label" for="inlineCheckbox1">
															Tik Tok
														</label>
													</div>
												</div>
												<div class="form-group">
													<div class="form-check form-check-inline">
														<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
														<label class="form-check-label" for="inlineCheckbox1">
															Facebook
														</label>
													</div>
												</div>
											</div>
											<!--  -->
											<div class="platform-right">
												<div class="form-group">
													<div class="form-check form-check-inline">
														<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
														<label class="form-check-label" for="inlineCheckbox1">
															Google
														</label>
													</div>
												</div>
												<div class="form-group">
													<div class="form-check form-check-inline">
														<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
														<label class="form-check-label" for="inlineCheckbox1">
															Pinteret
														</label>
													</div>
												</div>
											</div>
											<!--  -->
										</div>
										<!-- 发布平台 end -->
										<!-- 预算计价 -->
										<div class="d-flex justify-content-between from-item-hope">
											<div class="form-group">
												<label for="yusuan">预算计价</label>
												<input type="text" class="form-control" id="yusuan">
											</div>
											<div class="form-group">
												<label for="fujia">附加出价</label>
												<input type="text" class="form-control" id="fujia">
											</div>
										</div>
										<!-- 预算计价 end -->
										<!-- KOL领域 -->
										<div class="d-flex justify-content-between from-item-hope">
											<div class="form-group">
												<label for="scence">KOL领域</label>
												<select name="industy" class="form-control" id="scence">
													<option>科技测评</option>
												</select>
											</div>
											<div class="form-group">
												<label for="fans">推广目标</label>
												<select name="industy" class="form-control" id="fans">
													<option>5w以下</option>
												</select>
											</div>
										</div>
										<!-- KOl end -->
										<!-- KOL 地区-->
										<div class="d-flex justify-content-between from-item-hope">
											<div class="form-group">
												<label for="address">KOL地区</label>
												<select name="industy" class="form-control" id="address">
													<option>北美</option>
												</select>
											</div>
											<div class="form-group">
												<label for="promote-style">推广形式</label>
												<select name="industy" class="form-control" id="promote-style">
													<option>插播</option>
												</select>
											</div>
										</div>
										<!-- KOl end -->
										<!-- 是否需要版权-->
										<div class="d-flex justify-content-between from-item-hope">
											<div class="form-group">
												<label for="tv-copyright">是否需要视频版权</label>
												<select name="industy" class="form-control" id="tv-copyright">
													<option>否</option>
													<option>是</option>
												</select>
											</div>
											<div class="form-group">
												<label for="ch-hook">备注</label>
												<input type="text" class="form-control" id="ch-hook" placeholder="中国香港优先">
											</div>
										</div>
										<!-- KOl end -->
										<!--  -->
									</form>
								</div>
								<div class="modal-footer">
									<div class="add-avator">
										<img src="../assets/images/redadd.png" alt="">
										<img src="../assets/images/avator1.png" alt="">
										<img src="../assets/images/avator2.png" alt="">
									</div>
									<button type="button" class="btn btn-danger">Save changes</button>
								</div>
							</div>
						</div>
					</div>
					<!-- model end -->
					<!--  -->
				</div>
			</div>
		</nav>
	</div>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped="scoped">
	.container{
		padding-left: 0;
	}
	@media screen and (max-width:1380px) {
		.container{
			// min-width: 375px;
		}
	}

	li {
		list-style: none;
		padding-right: 18px;
	}
	
	.modal-content input,.modal-content select{
		font-size: 14px;
	}
	
	.navbar{
		padding: 1.5rem 0;
	}
	.nav-relative{
		position: relative;
		span{
			display: inline-block;
			position: absolute;
			top: -12px;
			left: 8px;
			color: gray;
		}
		a{
			color: #333333;
		}
	}
	.btn-links {
		width: 189.33px;
		height: 33.666px;
		// background-color: darkgray;
		display: flex;
		justify-content: space-between;
		align-items: center;
		img {
			padding-right: 5px;
		}
	}

	.btn-cont {
		position: relative;
	}

	.btn-cont span {
		position: absolute;
		top: -9px;
		left: -40px;
		background-color: orangered;
		/* padding: 4px; */
		width: 40px;
		height: 39px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	.btn-prm {
		// background-color: gold;
		border: none;
		outline: none;
		height: 20px;
		width: 33.666px;

		img {
			display: block;
			height: 40px;
			position: absolute;
			left: 0;
			top: -9px;
		}
	}

	.btn-prm:hover {
		text-decoration: none;
	}
	.brief-cont {
		text-align: center;
	}
	
	.brief-cont {
		line-height: 30px;
	}
	.modal-footer{
		justify-content: space-between;
	}
	.btn-danger {
		background-color: #F15D46;
		outline: none;
		border: none;
		margin: 40px 0 20px 0;
	}
	
	.btn-danger::hover {
		color: none;
	}
	
	.from-item-hope .form-group {
		width: 45%;
	}
	
	.platform {
		padding-top: 10px;
		div{
			width: 100%;
		}
		.platform-right{
			padding-left: 30px;
		}
	}
	
	.add-avator{
		position: relative;
		margin-top: -20px;
		img{
			display: inline-block;
			position: absolute;
			top: 0;
		}
		img:nth-of-type(1){
			left: 0px;
			z-index: 3;
		}
		img:nth-of-type(2){
			left: 25px;
			z-index: 2;
		}
		img:nth-of-type(3){
			left: 50px;
		}
	}
	.form-group{
		position: relative;
		#industy::after{
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			right: 0;
			background: url(../assets/images/xiala.png) no-repeat center;
			background-size: cover;
		}
	}
</style>
